<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#left{
				width: 400px;
				height: 400px;
				border: 3px solid red;
				margin: 20px;
				position: relative;
				background: url(image/6374601-02201607131502223840.jpg);
				float: left;
			}
			#box{
				width: 220px;
				height: 200px;
				background: wheat;
				opacity: 0.5;
				filter:alpha(opacity=50);
				position: absolute;
				top: 0;
				left: 0;
			}
			#right{
				width: 440px;
				height: 400px;
				border: 3px solid red;
				float: left;
				overflow: hidden;
				position: relative;
			}
			#pic{
				position: absolute;
				top: 0;
				left: 0;
			}
			#cover{
				width: 400px;
				height: 400px;
				background: black;
				opacity: 0.1;
				position: absolute;
				top: 0;
				left: 0;
				cursor: crosshair;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//1.抓元素
				var left = document.getElementById("left");
				var box = document.getElementById("box");
				var right = document.getElementById("right");
				var pic  = document.getElementById("pic");
				var cover = document.getElementById("cover");
				
				//2.给left鼠标移入事件  //8.修改事件源
//				left.onmousemove = function(e){
				cover.onmousemove = function(e){
					//3.获得事件对象
					var ev = window.event || e;
					//4.获得鼠标距离事件源的位置
					var evSourceX = ev.offsetX || ev.layerX;
					var evSourceY = ev.offsetY || ev.layerY;
					document.title = evSourceX + '|' + evSourceY;
					//5.获得色块的位置(色块距离事件源的位置)
					var boxX = evSourceX - 110;
					var boxY = evSourceY - 100;
					//9.解决色块溢出问题
					if(boxX > 180){
						boxX = 180;
					}
					if(boxX < 0){
						boxX = 0;
					}
					if(boxY > 200){
						boxY = 200;
					}
					if(boxY < 0){
						boxY = 0;
					}
					//6.赋值给色块
					box.style.left = boxX + 'px';
					box.style.top = boxY + 'px';
					//10.完成右边
					pic.style.left = boxX * -2 + 'px';
					pic.style.top = boxY * -2 + 'px';
				}
			}
		</script>
	</head>
	<body>
		<div id="left">
			<div id="box"></div>
			<!--解析bug:当鼠标动一下 就能获得真正鼠标距离事件源的位置 算出小色块的位置 小色块就能跟着鼠标跑了-->
			<!--但再动一下情况就不一样了 因为鼠标和事件源之间有一个子元素存在 那么父级元素的事件就会作用到子元素身上-->
			<!--那么这时候相当于小色块身上有事件 获得的位置就是鼠标距离小色块的位置 然后再减去110和100 就都成零了-->
			<!--那就跑到原始左上角的位置了~ 然后重蹈覆辙。。一下准确一下不准确一下准确一下有不准确......
			简单说就是鼠标和事件源之间有其他元素存在 那咱们就让他不存在其他元素-->

			<!--7.来一个盖子 大小位置和父级left一样 解决bug-->
			<div id="cover"></div>
		</div>
		<div id="right">
			<img src="image/6374601-02201607131502223840(1).jpg" id="pic"/>
		</div>
	</body>
</html>
